<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: aqua;
            margin: 0;
        }

        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            /* height: 300px; */
            /* background-color: blue; */
        }

        .ball {
            width: 130px;
            height: 130px;
            border: 8px solid black;
            border-radius: 50%;
            /* 变成圆角 */
            background-color: white;
            display: inline-block;
            /* 变成行内块元素 */
            vertical-align: top;
            /* 垂直对齐 */
            position: relative;
            /* 相对定位，子元素相对它定位 */
        }

        .face {
            width: 70px;
            height: 30px;
            position: absolute;
            right: 0;
            top: 30px;
            border-top-right-radius: 20px;
            /* background-color: gold; */
        }

        .eye {
            width: 15px;
            height: 14px;
            border-radius: 50%;
            /* border-top: 5px solid black; */
            border-bottom: 5px solid black;
            background-color: white;
            position: absolute;
            top: 5px;
        }

        .eye-l {
            left: 10px;
        }

        .eye-r {
            right: 10px;
        }

        .mouth {
            width: 30px;
            height: 10px;
            border-radius: 50%;
            border-bottom: 5px solid black;
            position: absolute;
            bottom: -9px;
            left: 0;
            right: 0;
            transform: translate(3px);
            margin: auto;
        }

        .eye-r-p {
            border-top: 5px solid black;
            border-bottom: 0px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="l-ball" class="ball">
            <div class="face face-l">
                <div class="eye eye-l"></div>
                <div class="eye eye-r"></div>
                <div class="mouth"></div>
            </div>
        </div>
        <div id="r-ball" class="ball">
            <div class="face face-r">
                <div class="eye eye-l eye-r-p"></div>
                <div class="eye eye-r eye-r-p"></div>
                <div class="mouth mouth-r"></div>
            </div>
        </div>
    </div>
</body>

</html>